// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis';
@import '~@mozilla-protocol/core/protocol/css/components/billboard';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-family';

.mzp-c-split .mzp-u-title-md {
    @include font-firefox;
}

// * -------------------------------------------------------------------------- */
// Billboard
.mzp-c-billboard {
    margin-top: $v-grid-xl;

    @supports (--css: variables) {
        margin-top: var(--v-grid-xl);
    }

    @media #{$mq-md} {
        margin-top: 0;
    }
}

// offset image override
.mzp-c-billboard .mzp-c-billboard-image-container {
    @media #{$mq-lg} {
        margin: 0;
        padding: $spacing-lg $spacing-sm;
    }
}

// * -------------------------------------------------------------------------- */
// Picto

.externals {
    .mzp-l-content {
        padding-bottom: 0;
    }

    @media #{$mq-lg} {
        .mzp-c-picto-heading {
            @include text-title-sm;
        }

        .mzp-c-picto-body {
            max-width: $content-xs;
            margin: 0 auto;
        }
    }
}

// * -------------------------------------------------------------------------- */
// Two column section

.c-column-container {
    @include clearfix;
}

.c-column {
    box-sizing: border-box;
    display: block;
    padding: $spacing-xl 0;

    @media #{$mq-lg} {
        float: left;
        padding: 0 $spacing-2xl;
        width: 50%;

        &:first-child {
            border-right: 1px solid rgba(0, 0, 0, 0.2);
        }
    }

    .c-column-content {
        @include bidi(((text-align, left, right),));

        h2 {
            margin-bottom: $spacing-xl;
        }
    }
}
